<div style="font-size:12px">
This a real world example. Here we demonstarte a new feature of the formatter where the check box can be edited.<br>
Point to column Enabled and right click a mouse. Mark or unmark child nodes.<br>
We achive this using the context menu plugin from Chris Domigan.<br>
Note: This will not work in Opera browsers, since Opera does not support context menu 
</div>
<br />
<table id="treegrid2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="ptreegrid2" class="scroll"></div>
<div class="contextMenu" id="myMenu1" style="display: none;">
	<ul>
   		<li id="mchild">Mark Childs</li>
        <li id="umchild">Unmark Child</li>
    </ul>
</div>

<script src="treegridadv.js" type="text/javascript"> </script>
<br />
<br>
<br>
<div style="font-size:12px">
<b> HTML </b>
<XMP>
...
<table id="treegrid" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="ptreegrid" class="scroll"></div>
<script src="treegrid.js" type="text/javascript"> </script>
</XMP>    
<b>Java Scrpt code</b>
<XMP>
...
jQuery("#treegrid2").jqGrid({
   	url: 'server.php?q=tree2',
	treedatatype: "xml",
	mtype: "POST",
   	colNames:["id","Account","Acc Num", "Debit", "Credit","Balance","Enabled"],
   	colModel:[
   		{name:'id',index:'id', width:1,hidden:true,key:true},
   		{name:'name1',index:'name', width:180},
   		{name:'num',index:'acc_num', width:80, align:"center"},
   		{name:'debit',index:'debit', width:80, align:"right"},		
   		{name:'credit',index:'credit', width:80,align:"right"},		
   		{name:'balance',index:'balance', width:80,align:"right"},
		{name:'enbl', index:'enbl', width: 60, align:'center', formatter:'checkbox', editoptions:{value:'1:0'}, formatoptions:{disabled:false}}
   	],
	height:'auto',
	pager : "#ptreegrid2",
    treeGrid: true,
	ExpandColumn : 'name1',
	caption: "Treegrid example"
});

var ci,rowid,ptr,td;
$('#treegrid2').contextMenu('myMenu1', {
      bindings: {
        'mchild': function(t) {
        	if(ptr && rowid && ci >=1) {
        		var gcn = $("#treegrid2").getFullTreeNode(ptr);
				$(gcn).each(function(i,v){
					$("td:eq("+ci+")",this).each(function(){
						if(!$("input[type='checkbox']",this).attr("checked")) {
							$(this).toggleClass("changed");
							$("input[type='checkbox']",this).attr("defaultChecked",true).attr("checked","checked");
						}
					});
				});
				ptr = rowid=ci=null;
        	}
        },
        'umchild': function(t) {
        	if(ptr && rowid && ci >=1) {
        		var gcn = $("#treegrid2").getFullTreeNode(ptr);
				$(gcn).each(function(){
					$("td:eq("+ci+")",this).each(function(){
						if($("input[type='checkbox']",this).attr("checked")) {
							$(this).toggleClass("changed");
							$("input[type='checkbox']",this).removeAttr("checked").attr("defaultChecked","");
						}
					});
				});
				ptr = rowid=ci=null;
        	}
        }
      },
      onContextMenu: function(e, menu) {
		td = e.target || e.srcElement;
		ptr = $(td).parents("tr.jqgrow")[0];
		ci = !$(td).is('td') ? $(td).parents("td:first")[0].cellIndex : td.cellIndex;
		if($.browser.msie) {
			ci = $.getAbsoluteIndex(ptr,ci);
		}
		if( ci >=1 ) {
			rowid = ptr.id;
			$('#treegrid2').setSelection(rowid,false);
			return true;
		} else {
		//alert(ptr.id+" : "+ptr.rowIndex+" : "+ci);
			return false;
		}
	  }
});
$("#jqContextMenu").addClass("ui-widget ui-widget-content").css("font-size","12px");
</XMP>

<b> PHP code </b>
<XMP>
$node = (integer)$_REQUEST["nodeid"];
// detect if here we post the data from allready loaded tree
// we can make here other checks
// load at once grid
$SQL = "SELECT account_id, name, acc_num, debit, credit, balance, level, lft, rgt FROM accounts ORDER BY lft";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8"); } else {
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
   echo "<rows>";
echo "<page>1</page>";
echo "<total>1</total>";
echo "<records>1</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
	echo "<row>";			
	echo "<cell>". $row[account_id]."</cell>";
	echo "<cell>". $row[name]."</cell>";
	echo "<cell>". $row[acc_num]."</cell>";
	echo "<cell>". $row[debit]."</cell>";
	echo "<cell>". $row[credit]."</cell>";
	echo "<cell>". $row[balance]."</cell>";
	echo "<cell>". rand(0,1)."</cell>";
	echo "<cell>". $row[level]."</cell>";
	echo "<cell>". $row[lft]."</cell>";
	echo "<cell>". $row[rgt]."</cell>";
	if($row[rgt] == $row[lft]+1) $leaf = 'true';else $leaf='false';
	echo "<cell>".$leaf."</cell>";
	echo "<cell>false</cell>";
	echo "</row>";
}
echo "</rows>";		
</XMP>   
</div>